<template>
  <div>
    <h2>我是子组件的</h2>
    <hr />
    <!-- {{$store.state.count}} -->
    <!-- state中的count没有经过数据处理，所以用getters中的 -->
    直接的{{ $store.getters.getCount }}
    <br />

    映射的 {{ getCount }}
    <br />
    state原始值 {{ count }}
    <hr />
    <button @click="incr">增加</button>
  </div>
</template>

<script>
import { INCR_COUNT } from "../../store/constant";
import { mapGetters, mapState } from "vuex";
export default {
  computed: {
    // ...mapGetters({
    //   getCount:"getCount",
    //   })
    //映射
    ...mapGetters(["getCount"]),
    ...mapState(["count"]),
  },
  mounted() {
    // console.log(mapGetters(["getCount"]))
  },

  methods: {
    //因为要同步store中的数据，因此不能直接去操作数据，需要使用commit方法
    //然后在store的文件中将此函数写上
    // incr(){
    //   this.$store.state.count++
    //   console.log(this.$store)
    // }
    incr() {
      // this.$store.commit("incr")
      //参数1 命令名称
      //参数2 命令传的参数 可选，比如加的步长
      this.$store.commit(INCR_COUNT, 100);
    },
  },
};
</script>

<style>
</style>